<template>
	<div class="doctorreviewedit">
		<h2 class="tit">运营端菜单配置</h2>
		<Form ref="formInline" :model="info" :rules="infoRules" inline>
			<div class = 'main'>
				<p class="title">基本信息</p>
				<Row class="box">
					<Col span="8">
						<Row>
							<Col :xs="6" >
								<i class="req-icon">*</i>菜单名称：
							</Col>
							<Col :xs="18">
								<FormItem class="fullItem" prop="menuName" >
									<Input class="w-input" v-model="info.menuName" placeholder="请输入名称" maxlength="20"/>
								</FormItem>
							</Col>
						</Row>
						<Row>
							<Col :xs="6">
								<i class="req-icon"></i>菜单层级：
							</Col>
							<Col :xs="18">
								<FormItem class="fullItem" prop="remark">
									<Select class="w-select" v-model="info.level" @on-change="changeLevel">
									<Option
										v-for="(item,index) in levelList"
										:value="item.id"
										:key="index"
										style='text-align:center;'
									>{{item.val}}</Option>
									</Select>
								</FormItem>
							</Col>
						</Row>
					</Col>
					<Col span="8">
						<Row v-if="this.info.level == 2">
							<Col :xs="6" class="text-r">
								<i class="req-icon">*</i>菜单路径：
							</Col>
							<Col :xs="18">
								<FormItem class="fullItem" prop="webPath">
									<Input class="w-input" v-model="info.webPath" placeholder="请输入路径" maxlength="150"/>
								</FormItem>
							</Col>
						</Row>
						<template v-if="info.level != 0">
							<Row>
								<Col :xs="6" class="text-r">
									上级菜单：
								</Col>
								<Col :xs="16">
									<FormItem class="fullItem" prop="no">
									<Select
										class="w-select"
										v-if="info.level != 0"
										v-model="info.topMenu"
										@on-change="changeTopMenu"
									>
										<Option
										v-for="(item,index) in topList"
										:value="item.id"
										:key="index"
										style='text-align:center;'
										>{{item.menuName}}</Option>
									</Select>
									<Select class="w-select" v-if="info.level == 2" v-model="info.secondMenu">
										<Option
										v-for="(item,index) in secondList"
										:value="item.id"
										:key="index"
										style='text-align:center;'
										>{{item.menuName}}</Option>
									</Select>
									</FormItem>
								</Col>
							</Row>
						</template>
					</Col>
					<Col span="8">
						<Row>
							<Col :xs="6"  class="text-r">
								<i class="req-icon"></i>类型：
							</Col>
							<Col :xs="18">
								<FormItem class="fullItem" prop="function">
									<Select class="w-select" @on-change="changeFunction" v-model="info.function">
									<Option
										v-for="(item,index) in functionList"
										:value="item.id"
										:key="index"
										style='text-align:center;'
									>{{item.name}}</Option>
									</Select>
								</FormItem>
							</Col>
						</Row>
						<Row>
							<Col :xs="6" class="text-r">
								<i class="req-icon"></i>排序：
							</Col>
							<Col :xs="18">
								<FormItem class="fullItem" prop="nub">
									<InputNumber class="w-select" v-model="info.showindex" placeholder="请输入1-999" :min='1' :max='9999'></InputNumber>
									<span style="color:#ff9966">(菜单排序按数字正序，1在最前)</span>
								</FormItem>
							</Col>
						</Row>
					</Col>
					<Col span="24">
						<Row>
							<Col span="2" >
								<i class="req-icon"></i>备注：
							</Col>
							<Col span="22">
								<FormItem class="fullItem-area" prop="remark">
									<Input
										v-model="info.remark"
										type="textarea"
										:autosize="{ minRows: 3, maxRows: 3 }"
										placeholder="备注"
										maxlength="63"
									/>
								</FormItem>
							</Col>
						</Row>
					</Col>
				</Row>
			</div>
			<div class = 'main'>
				<p class="title">权限配置</p>
				<Row class="box">               
					<Col span="12">
						<Row v-if="info.level == 2">
							<Col :xs="0" :md="2" class="text-r">
							&nbsp;
							</Col>
							<Col :xs="24" :md="18">
								<FormItem class="fullItem" prop="no">				<Input class="w-input" v-model="mSearchKey" placeholder="权限/备注"   />
										<Button type="primary" @click="loadPermise(1)">
											<Icon type="ios-search" size="14"/>
										</Button>								
								</FormItem>
							</Col>
						</Row>
					</Col>
					<Col span="24">
						<FormItem class="fullItem" prop="no">
							<Row class="waybox">
								<Col span="11">
									<h2 class="text-c">可选权限路径</h2>
									<Table border :columns="allCol" :data="allData"></Table>
									<Page
									:total="pcount"
									size="small"
									:current="ppageNo"
									:page-size="ppageSize"
									@on-change="loadPermise"
									style="text-align:center;"
									/>
								</Col>								
								<Col span="11">
									<h2 class="text-c">已选权限路径</h2>
									<Table border :columns="selCol" :data="selData"></Table>
								</Col>
							</Row>
						</FormItem>
					</Col>
				</Row>
			</div>
		</Form>
		<div class="butbox">
			<Button type="primary" @click="submit('formInline')" :disabled='disabledSave' class="btn">
				<Icon type="ios-checkmark icon" />提交
			</Button>
			<Button @click="reback" class="btn">                   
				<i class = "iconfont icon-butongyi icon" ></i>返回
			</Button>
		</div>
	</div>
</template>
<script>
import api from "@/api/commonApi";
export default {
	data() {
		return {
			id: null,
			func: null,
			level: null,
			info: {
				menuName: "",
				remark: "",
				function: "2",
				level: 2,
				topMenu: null,
				secondMenu: null
			},
			functionList: [
				{ id: "1", name: "菜单" }, 
				{ id: "2", name: "功能" }
			],
			levelList: [{ id: 2, val: 2 }],
			topList: [],
			secondList: [],
			pageNo: null,
			infoRules: {
				menuName: [
					{
						required: true,
						message: "菜单名称不能为空",
						trigger: "blur"
					}
				],
				webPath: [
					{
						required: true,
						message: "菜单路径不能为空",
						trigger: "blur"
					}
				],
				
			},
			map: null,
			allCol: [
				{
				title: "权限路径",
				key: "permisePath",
				align: "center"
				},
				{
					title: "设置",
					key: "operate",
					align: "center",
					width: 80,
					render: (h, params) => {
						let id = params.row.id;
						let status = true;
						for (let item of this.selData) {
							if (item.id == id) {
								status = false;
							}
						}
						let selBtn = h("Icon", {
							props: {
								type: "checkmark"
							},
							class: "cus-icon"
						});
						if (status) {
							selBtn = h(
								"a",
								{
								attrs: {
									href: "javascript:void(0);"
								},
								on: {
									click: () => {
									this.selThis({
										id: params.row.id,
										permisePath: params.row.permisePath
									});
									}
								}
								},
								"选择"
							);
						}
						return [selBtn];
					}
				}
			],
			selCol: [
				{
					title: "权限路径",
					key: "permisePath",
					align: "center"
				},
				{
					title: "设置",
					key: "operate",
					align: "center",
					width: 80,
					render: (h, params) => {
						let id = params.row.id;
						return [
						h(
							"a",
							{
							attrs: {
								href: "javascript:void(0);"
							},
							on: {
								click: () => {
									this.selRemove(params.row._index);
								}
							}
							},
							"移除"
						)
						];
					}
				}
			],
			allData: [],
			selData: [],
			ids: [],
			mSearchKey: '',
			searchKey: null,
			ppageNo: 1,
			ppageSize: 10,
			pcount: null,
			disabledSave: false
		};
	},
	created() {
		this.id = this.$route.query.id ? parseInt(this.$route.query.id) : null;
		this.func = this.$route.query.func ? this.$route.query.func : null;
		this.level = parseInt(this.$route.query.level);
		this.pageNo = this.$route.query.pageNo
			? parseInt(this.$route.query.pageNo)
			: 1;
		this.searchKey = this.$route.query.searchKey
			? this.$route.query.searchKey
			: "";
		this.map = new Map();
		this.$axios
		.post(api.findMenuByLevel, { level: 2 })
		.then(resp => {
			let menuList = resp.data.object;
			let tmpTop = [];
			let tmpSecond = [];
			menuList.map((el, i) => {
				if (el.level == 0) {
					tmpTop.push(el);
				} else {
					tmpSecond.push(el);
				}
			});
			this.map.set("topMenu", tmpTop);
			tmpTop.map((el1, i1) => {
			let tmp = [];		  
			for (let j = 0; j < tmpSecond.length; j++) {
				let tmpSecondList = tmpSecond[j];
				if (el1.id == tmpSecondList.parentId) {				
					tmp.push(tmpSecondList);
				}
			}
				this.map.set(el1.id, tmp);
			});
			this.topList = this.map.get("topMenu");
			if (this.id) {
				this.$axios
					.post(api.findORMenuById, {
						id: this.id,
						function: this.func,
						level: this.level
					})
					.then(resp => {
						this.info = resp.data.object;
						if (this.info.level == 0 || this.info.level == 1) {
							this.levelList = [{ id: 0, val: 0 }, { id: 1, val: 1 }];
						} else if (this.info.level == 2) {
							this.levelList = [{ id: 2, val: 2 }];
						}
						if (this.info.level == 2) {
							this.info.topMenu = this.info.topMenuId;
							this.info.secondMenu = this.info.parentId;
							this.secondList = this.map.get(this.info.topMenu);
						} else if (this.info.level == 1) {
							this.info.topMenu = this.info.parentId;
						}
						this.info.authList.map((el, i) => {
							el.permisePath = el.name + "(" + el.remark + ")";
							this.ids.push(el.id);
							this.selData.push(el);
						});
					})
					.catch(err => {
					// this.$Message.info("服务器超时，请重新访问")
					});
					console.log(this.selData)
			}
		})
		.catch(err => {
			// this.$Message.info("服务器超时，请重新访问")
		});
		this.loadPermise(1);

		let breadList = [
		{ path: "/index", title: "首页" },
		{
			path: "/index/configuration/admin/user/list",
			title: "帐号权限配置"
		},
		{
			path: "/index/configuration/menuManagement/list",
			title: "运营菜单配置"
		}
		];
		this.$emit("changeBreadList", breadList);
	},
	methods: {
		selThis(obj) {
			this.selData.push(obj);
			this.ids.push(obj.id);
		},
		selRemove(_index) {
			this.selData.splice(_index, 1);
			this.ids.splice(_index, 1);
		},
		//权限管理-分页列表
		loadPermise(pageNo) {
		this.ppageNo = pageNo;
		//查询所有接口权限
		let params = {};
		params.searchKey = this.mSearchKey.trim();
		params.pageNo = this.ppageNo;
		params.pageSize = this.ppageSize;
		this.$axios
			.post(api.findAuthPageList, params)
			.then(resp => {
				this.pcount = resp.data.object.total;
				this.allData = resp.data.object.records;
				this.allData.map((el, i) => {
					this.allData[i].permisePath = el.name + " (" + el.remark + ") ";
				});
			})
			.catch(err => {
				console.log(err);
			});
		},
		changeFunction() {
			this.info.level = null;
			this.info.topMenu = null;
			this.info.secondMenu = null;
			this.info.parentId = null;
			let func = this.info.function;
			if (func == 1) {
				this.info.level = 0;
				this.levelList = [{ id: 0, val: 0 }, { id: 1, val: 1 }];
			} else {
				this.info.level = 2;
				this.levelList = [{ id: 2, val: 2 }];
			}
		},
		changeLevel() {
			this.info.parentId = null;
			this.info.topMenu = null;
			this.info.secondMenu = null;
			this.info.webPath = null;
			this.info.showindex = null;
			this.ids = [];
			this.selData = [];
		},
		changeTopMenu() {
			this.info.secondMenu = ''
			this.secondList = this.map.get(this.info.topMenu);
		},
		submit(name) {
			this.disabledSave = true
			this.$refs[name].validate(valid => {
				if (Boolean(valid)) {
				let operateApi = "";
				let subMitObj = {};
				let noticeMsg = "";
				if (this.id) {
					operateApi = api.updateMenuAndAuth;
					noticeMsg = "修改";
				} else {
					noticeMsg = "添加";
					operateApi = api.insertMenuAndAuth;
				}	
				if (this.info.function=='2'&& !this.info.secondMenu) {
					this.$Message.error("请完整选择上级菜单");
					this.disabledSave = false
					return
				}		
				subMitObj.id = this.info.id ? parseInt(this.info.id) : null;
				subMitObj.ids = this.ids;
				subMitObj.menuName = this.info.menuName?this.info.menuName.trim():null;
				subMitObj.remark = this.info.remark?this.info.remark.trim():null;
				subMitObj.function = this.info.function;
				subMitObj.webPath = this.info.webPath;
				subMitObj.showindex = this.info.showindex;
				subMitObj.level = this.info.level;
				subMitObj.parentId = this.info.secondMenu
					? this.info.secondMenu
					: this.info.topMenu
					? this.info.topMenu
					: 0;
				this.$axios
					.post(operateApi, subMitObj)
					.then(resp => {
						if (resp.data.code == 1) {
							console.log(resp);
							this.disabledSave = false
							//   公用方法
							this.functionJS.queryNavgationTo(
							this,
							"/index/configuration/menuManagement/list",
							{
								pageNo: this.pageNo,
								searchKey: this.searchKey
							}
							);
						} else {
							this.disabledSave = false
							this.$Message.error(noticeMsg + "失败，请重试");
						}
					})
					.catch(err => {
						this.disabledSave = false
					});
				}
			});
		},
		reback() {
			//   公用方法
			this.functionJS.queryNavgationTo(
				this,
				"/index/configuration/menuManagement/list",
				{
					pageNo: this.pageNo,
					searchKey: this.searchKey
				}
			);
		}
	}
};
</script>
<style lang="less" scoped>
.doctorreviewedit {
	padding: 10px 0;
	width: 100%;
	background: #ffffff;
	box-sizing: border-box;
	.w-select {
		width: 100px;
	}
	.w-input {
		width: 90%;
	}
	.req-icon {
		font-size: 18px;
		color: red;
		display: inline-block;
		height: 18px;
		width: 18px;
		text-align: center;
		line-height: 18px;
		vertical-align: middle;
	}
	.fullItem {
		width: 100%;
	}
	.fullItem-area {
		// width: 500px;
		width: 95%;
	}
	.text-r {
		text-align: right;
	}
	.text-c {
		text-align: center;
	}
  .tit {
		margin:10px 0;
		font-weight:bold;
		text-align:center;
	}
	.main{
		width: 98%;
		display: flex;
		flex-direction: column;
		margin: 10px auto;
		border: 1px solid #f0f0f0;
		box-shadow: 0 4px 3px #ebedf8;
		border-radius: 5px;
		margin-bottom: 20px;
		.title {
			font-size: 20px;
			padding-left: 15px;
			margin-bottom: 20px;
			color: #333;
			height: 40px;
			line-height: 40px;
			background: #ebedf8;         
		}
		.box{
			padding: 0 30px;
		}
		.hongdian {
			margin-left: -10px;
		}
	}
	.waybox {
		display: flex;
		justify-content: space-between;
	}
	.butbox {
		text-align: center;
		margin: 20px auto;
		.btn {
            height: 35px;
            width: 75px;
        }
	}
	.icon {
		font-size: 14px;
		margin-right: 5px;
	}
}
</style>
